﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>众晒网-发布</title>
    <link href="/ui/css/Hui.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
      .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; }
      .H-header-title.H-center-all.H-font-size-18.H-text-show-row-1.H-theme-font-color-white.H-position-absolute.H-width-100-percent {
          background: white;
      }
      i.H-iconfont.H-icon-arrow-left.H-font-size-18.H-vertical-middle {
          color: black;
      }
      label.H-display-block.H-vertical-middle.H-font-size-15 {
          color: black;
          font-weight: 600;
      }
      .H-theme-background-color9 {
          background-color: #ffffff;
      }
      .H-clear-both.H-width-100-percent.H-display-table.H-box-sizing-border-box.H-padding-vertical-top-10.H-padding-horizontal-left-10.H-theme-background-color-white {
          width: 100%;
          height: 300px;
          background: rgba(206, 206, 206, 0.12);
          border: 25px solid white;
      }
      img.H-width-100-percent.H-display-block {
          
          margin-top: 20%;
      }
      .tianjia {
          color: #565555;
          font-size: 20px;
          font-weight: 800;
      }
      .H-timeline, .H-timeline-dot, html, body {

          background: #fff;

      }
      .H-width-100-percent {
        margin: 0 auto;
        width: 91%;
        height: auto;
        max-height: 200px;
      }
      .inputtext {
          outline: none;
          border: 0;
          border-bottom: 1px solid #C0C0C0;
      }
      input.inputtext {
          width: 90%;
          text-align: center;
      }
      .p{
        font-size: 14px;
        color: #C5C5C5;
        text-align: center;
      }
      a {
          color: #afafaf;
          text-decoration: none;
      }
      .H-width-100-percent H-display-block{
        width: 50px;
        height: 50px;
      }
    .ziding-p {
    margin-top: -42px;
    }
    .H-padding-horizontal-left-10 {
    padding-left: 0px;
    }
      .H-width-100-percent {
    width: auto;
    }
    </style>
    <script language="javascript" type="text/javascript"> 
		function fn_browse() 
		{ 
		document.test_form.browse.click(); 
		document.test_form.file.value = document.all.test_form.browse.value; 
		} 
</script> 

</head>
<body>
    <header class="H-header H-theme-background-color9" id="header">
        <span tapmode="" onclick="javascript:history.go(-1);" class="H-icon H-position-relative H-display-inline-block H-float-left H-vertical-middle H-theme-font-color-white H-padding-horizontal-left-5 H-z-index-100"><i class="H-iconfont H-icon-arrow-left H-font-size-18 H-vertical-middle"></i><label class="H-display-block H-vertical-middle H-font-size-15">返回</label></span>
        
        <span class="H-icon H-position-relative H-display-inline-block H-float-right H-vertical-middle H-theme-font-color-white H-padding-horizontal-right-10 H-z-index-100"><label class="H-display-block H-vertical-middle H-font-size-15" onclick="last()";>下一步</label></span>
    </header>
	
    <div class="H-clear-both H-width-100-percent H-display-table H-box-sizing-border-box H-padding-vertical-top-10 H-padding-horizontal-left-10 H-theme-background-color-white">
       <div align="center" class="tianjia">
       
		 
		        <img src="/ui/image/相机-3.png" style="margin-bottom: -110px;" />
           <div class="ziding-p" style="width: 70%; height: 200px;"><img src="/ui/image/dian.png" style="width: auto; max-width: 90%;"  class="H-width-100-percent H-display-block" alt="" title="" id="articleImg"/></div>
           <label style="width: 20px; height: 20px;">+添加封面图<input type="file" id="articleImgBtn" name="browse" style="display: none;"  /></label>
           
			<br />
			
        </div>
        
    </div>
    <div style="height: 70px;" align="center">
       <center> <h3>
       	<input type="text" id="title" name="title" value="" placeholder="输入文章标题" class="inputtext">
       	</h3>
       </center>
    </div>
    
       <p class="p" align="center">1. 明确表达主题的封面和标题，会吸引更多人的来阅读</p>
  
       <p class="p">2. 撰写全文时，可以继续修改文章的封面和标题</p>
 
    
    <script src="/ui/script/H.js" type="text/javascript"></script>
	<script src="/ui/js/jquery-2.1.3.min.js"></script>
	<script type="text/javascript" src="/ui/layer/mobile/layer.js"></script> 
    <script>
	$('#articleImgBtn').change(function(){
              run(this, function (data) {  
                  uploadImage(data);
            });  
         });
 
         function run(input_file, get_data) {  
              /*input_file：文件按钮对象*/  
             /*get_data: 转换成功后执行的方法*/  
             if (typeof (FileReader) === 'undefined') {  
                alert("抱歉，你的浏览器不支持 FileReader，不能将图片转换为Base64，请使用现代浏览器操作！");  
            } else {  
                 try {  
                     /*图片转Base64 核心代码*/  
                    var file = input_file.files[0];  
                     //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件  
                    if (!/image\/\w+/.test(file.type)) {  
                         alert("请确保文件为图像类型");  
                        return false;  
                     }  
                     var reader = new FileReader();  
                     reader.onload = function () {  
                         get_data(this.result);  
                    }  
                     reader.readAsDataURL(file);  
                } catch (e) {  
                     //alert('图片转Base64出错啦！' + e.toString())  
                 }  
             }  
         }  
           
         function uploadImage(img) {
             //判断是否有选择上传文件
                 var imgPath = $("#articleImgBtn").val();
                 if (imgPath == "") {
                     alert("请选择上传图片！");
                     return;
                 }
                 //判断上传文件的后缀名
                 var strExtension = imgPath.substr(imgPath.lastIndexOf('.') + 1);
                 if (strExtension != 'jpg' && strExtension != 'gif'
                 && strExtension != 'png' && strExtension != 'bmp') {
                     alert("请选择图片文件");
                     return;
                 }
                 $.ajax({
                     type: "POST",
                     url: "glphotoapi.php",
                     data: {img: img},    //视情况将base64的前面字符串data:image/png;base64,删除
                     cache: false,
                     success: function(data) {
                        	layer.open({
    content: '图片上传成功'
    ,skin: 'msg'
    ,time: 2 //2秒后自动关闭
  });
                         $("#articleImg").attr('src', JSON.parse(data).img);
                     },
                     error: function(XMLHttpRequest, textStatus, errorThrown) {
                        	layer.open({
    content: '上传失败，请检查网络'
    ,skin: 'msg'
    ,time: 2 //2秒后自动关闭
  });
                     }
                 });
             }
	</script>
	<script>
	function last(){
		
	var photo=$('#articleImg')[0].src;
	var title=document.getElementById("title").value;
	if(photo==""){
	layer.open({
    content: '请选择上传图片！'
    ,skin: 'msg'
    ,time: 2 //2秒后自动关闭
  });	
  
  return false;
	}
	
	if(title==""){
	layer.open({
    content: '请填写标题'
    ,skin: 'msg'
    ,time: 2 //2秒后自动关闭
  });
 return false;  
	}	
	
 location.href="45649.php?photo="+photo+"&title="+title;
	}
	
	</script>
</body>
</html>